
<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" href="gridforms/gridforms.css">
	<link rel="stylesheet" type="text/css" href="media/style.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="gridforms/gridforms.js"></script>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
	<div class="header">
		<img src="media/images/logo.png">
		<h2>Data entry can be beautiful</h2>
		<h3>Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.</h3>
		<br>
		<h3><b><a href="https://github.com/kumailht/gridforms">Download on Github</a></b></h3>
		<br>
		<iframe src="http://ghbtns.com/github-btn.html?user=kumailht&repo=gridforms&type=watch"
  allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://kumailht.com/gridforms/" data-via="kumailht" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</div>

	<br><br><br>
	<br>

	<center><img src="media/images/try.png"></center>

	<br>

	<form class="my-grid-form">
		<fieldset>
			<legend>Add to inventory</legend>
			<div data-row-span="4">
				<div data-field-span="3">
					<label>Product Name</label>
					<input type="text" autofocus>
				</div>
				<div data-field-span="1">
					<label>Tags</label>
					<input type="text">
				</div>
			</div>
			<div data-row-span="2">
				<div data-field-span="1">
					<label>Vendor</label>
					<select>
						<option>Select a vendor</option>
						<option>ted</option>
						<option>Magna Phasellus Dolor Incorporated</option>
						<option>Fames Ac Turpis Inc.</option>
						<option>Eu Eros Institute</option>
						<option>Suspendisse Sagittis Associates</option>
						<option>Tempor Lorem PC</option>
						<option>Nulla Facilisi Sed PC</option>
						<option>Dignissim Corp.</option>
						<option>Blandit Ltd</option>
						<option>Dapibus Gravida Aliquam LLP</option>
						<option>Cursus A Inc.</option>
						<option>Tellus PC</option>
						<option>Fusce Mi Foundation</option>
						<option>Dictum Sapien Aenean Associates</option>
						<option>In Tincidunt PC</option>
						<option>Sapien Aenean Ltd</option>
						<option>Libero Foundation</option>
						<option>Egestas Rhoncus Proin Corp.</option>
						<option>Feugiat Nec Diam Institute</option>
						<option>Turpis Foundation</option>
						<option>Pede Malesuada Vel Associates</option>
						<option>Eget Venenatis A PC</option>
						<option>Mollis Vitae Corporation</option>
						<option>Gravida Mauris Incorporated</option>
						<option>Tortor Consulting</option>
						<option>Habitant Morbi Tristique Corporation</option>
						<option>Enim Corp.</option>
						<option>Sed Turpis Nec LLC</option>
						<option>Enim Foundation</option>
						<option>Tincidunt Orci Quis Institute</option>
						<option>Lectus Pede LLC</option>
						<option>Class Corporation</option>
						<option>Erat Volutpat Nulla LLP</option>
						<option>Sed LLC</option>
						<option>Justo Faucibus Associates</option>
						<option>Vel Turpis Foundation</option>
						<option>Tellus Aenean Limited</option>
						<option>Tempus Scelerisque Corporation</option>
						<option>Eleifend LLP</option>
						<option>A Felis Ullamcorper Company</option>
						<option>Neque Non LLC</option>
						<option>Nibh Donec Est PC</option>
					</select>
				</div>
				<div data-field-span="1">
					<label>Product Type</label>
					<select>
						<option>Select a product type</option>
						<option>et magnis</option>
						<option>Vivamus rhoncus.</option>
						<option>egestas ligula.</option>
						<option>nulla. Cras</option>
						<option>Proin mi.</option>
						<option>turpis non</option>
						<option>ante ipsum</option>
						<option>arcu. Curabitur</option>
						<option>ante. Maecenas</option>
						<option>magna. Phasellus</option>
						<option>Suspendisse aliquet,</option>
						<option>purus gravida</option>
						<option>ac risus.</option>
						<option>mollis non,</option>
					</select>
				</div>
			</div>
			<div data-row-span="1">
				<div data-field-span="1">
					<label>Product Description</label>
					<textarea></textarea>
				</div>
			</div>
			<div data-row-span="5">
				<div data-field-span="1">
					<label>SKU</label>
					<input type="text">
				</div>
				<div data-field-span="1">
					<label>Initial Stock Level</label>
					<input type="text">
				</div>
				<div data-field-span="1">
					<label>Cost Price</label>
					<input type="text">
				</div>
				<div data-field-span="1">
					<label>Wholesale Price</label>
					<input type="text">
				</div>
				<div data-field-span="1">
					<label>Retail Price</label>
					<input type="text">
				</div>
			</div>
		</fieldset>
	</form>

	<div class="why">
		<br><br><br>
		<br><br>

		<center><img src="media/images/features.png"></center>

		<br><br><br>

		<div class="grid-3 gutter-60">
			<div class="span-1">
				<div class="my-grid-form">
					<div data-row-span="2" style="border-top: 1px solid #333">
						<div data-field-span="1">
							<label>Country</label>
							<input type="text">
						</div>
						<div data-field-span="1">
							<label>City</label>
							<input type="text">
						</div>
					</div>
				</div>
				<br>
				<p><span class="digit">1.</span>Proximity of fields relative to each other on the grid provides useful context. And field sizes serve as hints for what the value might be.</p>
			</div>
			<div class="span-1">
				<img src="media/images/form-zoomed-out.png" style="width:256px">
				<p><span class="digit">2.</span>With grid forms, lengthy forms can easily fit above the fold. Which means less scrolling. And tabbing through the form comes more naturally. <a href="example.html" target="blank">Example Bank Application</a></p>
			</div>
			<div class="span-1">
				<img src="media/images/responsive.png">
				<p><span class="digit">3.</span>Each field wraps to its own line on mobile devices. Even then, the forms are denser than their counterparts.</p>
			</div>
		</div>
	</div>

	<br><br><br><br>

	<div class="footer">
		<i><b>Gridforms</b> was made by <b><a href="http://kumailht.com">Kumail Hunaid</a></b>. <br><br>Follow <a href="http://twitter.com/kumailht">@kumailht</a> on Twitter or <br><a href="http://kumailht.com/#email-notification">subscribe</a> to be notified about future projects.</i>
	</div>

	<br><br><br>
	<center><a href="http://formbakery.com"><img src="media/images/now-checkout-formbakery.png"></a></center>
	<br><br><br><br>
	<br><br><br><br>

	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-632178-11']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>
</body>
</html>
